import { NavLink, useLoaderData, useSubmit, useNavigation, useActionData } from "react-router";
import { Card, Form, Input, Button } from "antd";
import { useEffect } from "react";

const Home = () => {
  // 没有loader之前，请求数据
  //   useEffect(() => {
  //     const fetchData = async () => {
  //       const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  //       const data = await res.json();
  //       console.log(data);
  //     };
  //     fetchData();
  //   }, []);

  // 使用loader之后(get请求)，在路由中请求数据，在这里直接接收
  const { data, success } = useLoaderData();
  const navigation = useNavigation();
  const actionData = useActionData();
  console.log("return = ", actionData);
//   console.log(data, success);

  // 使用action提交数据（post等请求）
  const submit = useSubmit();

  return (
    <Card>
      <h1>Home</h1>
      {/* <NavLink to="/about?糖度=修仙&加料=老板三根头发&age=18">About</NavLink> */}
      {/* state 传参方式 */}
      {/* <NavLink to="/about" state={[{ name: "张三" }, { name: "李四" }]}>
        About
      </NavLink> */}
      <Form
        onFinish={(values) => {
          submit(values, { method: "post", encType:"application/json" }); // [!code highlight]  提交表单 默认是fromdata格式编码
        }}
      >
        <Form.Item name="name" label="姓名">
          <Input />
        </Form.Item>
        <Form.Item name="age" label="年龄">
          <Input />
        </Form.Item>
        <Button loading={ navigation.state === 'submitting'} type="primary" htmlType="submit">
          提交
        </Button>
      </Form>
    </Card>
  );
};

export default Home;
